<template>
  <el-container>
    <el-aside>
      <el-collapse v-model="selectTab" accordion @change="changeCollapse">
        <el-collapse-item v-for="(item, index) in components" :name="item.name" :title="item.name" :key="index">
          <template slot="title">
            {{ item.name }}
            <el-tag v-show="item.unfinished">未完成</el-tag>
          </template>
          <component
            :is="item.component"
            :getMap="getMap"
            :getTool="getTool"
            :mapLoadSuccess="mapLoadSuccess"
            v-if="selectTab == item.name"
          ></component>
        </el-collapse-item>
      </el-collapse>
    </el-aside>
    <el-main>
      <div class="map-warpper">
        <div ref="map" id="sgmap" class="e-map"></div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Setting from './assets/js/settings';
import { request } from './assets/js/request';
import BaseMapTool from './tools/BaseMapTool/BaseMapTool';
import MeasureTool from './tools/MeasureTool/MeasureTool';
import RenderTool from './tools/RenderTool/RenderTool';
import ActualGridTool from './tools/ActualGridTool/ActualGridTool';
import ThinGridTool from './tools/ThinGridTool/ThinGridTool';
import SimpleGridTool from './tools/SimpleGridTool/SimpleGridTool';
import CableGridTool from './tools/CableGridTool/CableGridTool';
import SelectTool from './tools/SelectTool/SelectTool';
import SearchTool from './tools/SearchTool/SearchTool';
import HighlightTool from './tools/HighlightTool/HighlightTool';
import EditTool from './tools/EditTool/EditTool';
import PowerGridTool from './tools/PowerGridTool/PowerGridTool';
import VoltageControlTool from './tools/VoltageControlTool/VoltageControlTool';
import LayerControlTool from './tools/LayerControlTool/LayerControlTool';
import LabelControlTool from './tools/LabelControlTool/LabelControlTool';
import RegionTool from './tools/RegionTool/RegionTool';
import BlockTool from './tools/BlockTool/BlockTool';
import PowerRangeTool from './tools/PowerRangeTool/PowerRangeTool';
import ConnectDiagramTool from './tools/ConnectDiagramTool/ConnectDiagramTool';
import ThematicTool from './tools/ThematicTool/ThematicTool';
import DistrictTool from './tools/DistrictTool/DistrictTool';
import BookMarkTool from './tools/BookMarkTool/BookMarkTool';
import OverviewTool from './tools/OverviewTool/OverviewTool';
import SnapEditTool from './tools/SnapEditTool';
import SliceTool from './tools/SliceTool';
import ExportTool from './tools/ExportTool/ExportTool.vue';
import SelectCheckTool from './tools/SelectCheckTool/SelectCheckTool.vue';
import DispatchGridTool from './tools/DispatchGridTool/DispatchGridTool.vue';
export default {
  components: {
    BaseMapTool,
    MeasureTool,
    RenderTool,
    ActualGridTool,
    ThinGridTool,
    SimpleGridTool,
    CableGridTool,
    SelectTool,
    SearchTool,
    HighlightTool,
    EditTool,
    PowerGridTool,
    VoltageControlTool,
    LayerControlTool,
    LabelControlTool,
    RegionTool,
    BlockTool,
    PowerRangeTool,
    ConnectDiagramTool,
    ThematicTool,
    DistrictTool,
    BookMarkTool,
    OverviewTool,
    SnapEditTool,
    SliceTool,
    ExportTool,
    SelectCheckTool,
    DispatchGridTool
  },
  props: {},
  data() {
    return {
      mapLoadSuccess: false,
      selectTab: localStorage.getItem('selectTab') || 'BaseMapTool',
      components: [
        { name: 'LabelControlTool 标注控制工具', component: 'LabelControlTool' },
        { name: 'SelectCheckTool 下拉选择', component: 'SelectCheckTool' },
        { name: 'ExportTool 导出工具', component: 'ExportTool' },
        { name: 'SliceTool 线切割工具', component: 'SliceTool' },
        { name: 'SnapEditTool 捕捉编辑工具', component: 'SnapEditTool' },
        { name: 'BaseMapTool 基础工具', component: 'BaseMapTool' },
        { name: 'MeasureTool 测量工具', component: 'MeasureTool' },
        { name: 'RenderTool 渲染工具', component: 'RenderTool' },
        { name: 'ActualGridTool 现状网架', component: 'ActualGridTool', default: true },
        { name: 'ThinGridTool 抽稀网架', component: 'ThinGridTool' },
        { name: 'SimpleGridTool 简化网架', component: 'SimpleGridTool' },
        { name: 'DispatchGridTool 调度网架', component: 'DispatchGridTool' },
        { name: 'CableGridTool 电缆廊道', component: 'CableGridTool' },
        { name: 'SelectTool 选择工具', component: 'SelectTool' },
        { name: 'SearchTool 搜索工具', component: 'SearchTool' },
        { name: 'HighlightTool 高亮工具', component: 'HighlightTool' },
        { name: 'EditTool 编辑工具', component: 'EditTool' },
        { name: 'PowerGridTool 电网设备修改', component: 'PowerGridTool', unfinished: true },
        { name: 'VoltageControlTool 电压控制工具', component: 'VoltageControlTool' },
        { name: 'LayerControlTool 图层控制工具', component: 'LayerControlTool' },
        { name: 'RegionTool 区域绘制工具', component: 'RegionTool' },
        { name: 'BlockTool 地块工具', component: 'BlockTool' },
        { name: 'PowerRangeTool 供电范围工具', component: 'PowerRangeTool' },
        { name: 'ConnectDiagramTool 联络图工具', component: 'ConnectDiagramTool', unfinished: true },
        { name: 'ThematicTool 专题图工具', component: 'ThematicTool' },
        { name: 'DistrictTool 行政区划工具', component: 'DistrictTool' },
        { name: 'BookMarkTool 书签工具', component: 'BookMarkTool' },
        { name: 'OverviewTool 鹰眼图工具', component: 'OverviewTool' }
      ].sort((a) => a.default ? -1 : 1)
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 地图初始化
    init() {
      this.mapLoadSuccess = false;
      let settings = Setting;
      const options = {
        // eslint-disable-next-line camelcase
        sdk_resources: [settings.sgmap_resources_js],
        base: {
          type: 'sgmap',
          container: this.$refs.map,
          key: settings.sgmap_resources_key,
          sn: settings.sgmap_resources_sn,
          style: settings.sgmap_resources_style,
          // center: [119.886938315, 32.337725435],
          center: [104.08388258782702, 30.649534393775554],
          zoom: 16.84,
          logLevel: [0, 1, 2],
          doubleClickZoom: false
        },
        config: {
          RESOURCE_BASEURL: settings.impl_resource_url,
          APIBASEURL: settings.impl_api_baseurl,
          SYS_DSNOS: settings.sys_dsnos,
          IMAGE_LIST: [
            // { id: "zsb_default", url: "common/default/XXX.png" },
            // { id: "zsb_default", url: "common/default/XXX.png" },
            // { id: "zsb_default", url: "common/default/XXX.png" },
          ],
          SPRITE_IMAGE: [
            { image: 'spriteImage/eleImage.png', index: 'spriteImage/eleImageIndex.json' }
          ],
          PLUGINS: []
        },
        request: (data) => {
          return request(data);
        }
      };
      let map = new this.$FzProductUtils.Map(options);
      window.sgmap = map;
      // 地图加载完成回调
      map.impl.eventBus.$on('mapLoaded', () => {
        map.impl.map.addControl(new SGMap.NavigationControl({ showCompass: true }), 'bottom-right');
        map.impl.map.addControl(new SGMap.PitchControl(), 'bottom-right');
        map.impl.map.addControl(new SGMap.ScaleControl({ maxWidth: 80, unit: 'metric' }), 'bottom-left');
        // 地图点击事件
        map.impl.map.on('click', (e) => {
          console.log(e);
          console.log(`lnglat: [${e.lngLat.toArray().toString()}]\
          center: [${e.target.getCenter().toArray().toString()}]\
          zoom: ${e.target.getZoom()}`);
          // this.generate(e);
        });
        this.mapLoadSuccess = true;
        console.log('mapinstance', map);
      });
    },
    generate(e) {
      let point = turf.point([e.lngLat.lng, e.lngLat.lat]);
      point.geometry.coordinates = this.$MapUtils.CoordinateUtil.projectLngLatToWebMercator(point.geometry.coordinates);
      console.log(this.$MapUtils.Geojson2WktUtil.parse(point.geometry));
    },
    changeCollapse() {
      this.init();
      localStorage.setItem('selectTab', this.selectTab);
    },
    getMap() {
      return window.sgmap;
    },
    getTool(toolname) {
      return window.sgmap.tools[toolname];
    }
  },
  created() {},
  mounted() {
    this.init();
  },
  destroyed() {}
};
</script>

<style>
.map-warpper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.map-warpper .e-map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
